<template>
  <div class="event-management-guide">
    <a-modal
      :open="visible"
      title="事件管理使用指南"
      width="900px"
      @cancel="handleClose"
      :footer="null"
    >
      <div class="guide-content">
        <div class="guide-sections">
          <section class="guide-section">
            <h3>🎯 事件管理概述</h3>
            <p>
              事件管理系统支持资源的各种事件定义、触发、查询、订阅和监控管理：
            </p>
            <a-row :gutter="16" style="margin-top: 16px">
              <a-col :span="4">
                <a-card size="small" class="event-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:setting-outlined" />
                    事件定义
                  </template>
                  <p>定义各种事件类型和参数</p>
                </a-card>
              </a-col>
              <a-col :span="4">
                <a-card size="small" class="event-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:search-outlined" />
                    事件查询
                  </template>
                  <p>查询和过滤事件记录</p>
                </a-card>
              </a-col>
              <a-col :span="4">
                <a-card size="small" class="event-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:bell-outlined" />
                    事件订阅
                  </template>
                  <p>订阅和处理事件通知</p>
                </a-card>
              </a-col>
              <a-col :span="4">
                <a-card size="small" class="event-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:thunderbolt-outlined" />
                    事件触发器
                  </template>
                  <p>配置事件触发条件</p>
                </a-card>
              </a-col>
              <a-col :span="4">
                <a-card size="small" class="event-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:file-text-outlined" />
                    事件模板
                  </template>
                  <p>预定义事件模板</p>
                </a-card>
              </a-col>
              <a-col :span="4">
                <a-card size="small" class="event-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:monitor-outlined" />
                    事件监控
                  </template>
                  <p>监控事件处理状态</p>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>⚙️ 事件类型和严重程度</h3>

            <h4>事件类型分类</h4>
            <a-row :gutter="16">
              <a-col :span="8">
                <a-card size="small" title="资源生命周期事件">
                  <a-list size="small">
                    <a-list-item>
                      <a-tag color="green">资源创建</a-tag>
                      RESOURCE_CREATED
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="blue">资源更新</a-tag>
                      RESOURCE_UPDATED
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="red">资源删除</a-tag>
                      RESOURCE_DELETED
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small" title="状态变更事件">
                  <a-list size="small">
                    <a-list-item>
                      <a-tag color="orange">状态变更</a-tag>
                      STATUS_CHANGED
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="purple">行为执行</a-tag>
                      BEHAVIOR_EXECUTED
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="red">补偿触发</a-tag>
                      COMPENSATION_TRIGGERED
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small" title="系统事件">
                  <a-list size="small">
                    <a-list-item>
                      <a-tag color="red">系统错误</a-tag>
                      SYSTEM_ERROR
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="orange">告警触发</a-tag>
                      ALERT_TRIGGERED
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="blue">自定义事件</a-tag>
                      CUSTOM_EVENT
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
            </a-row>

            <h4 style="margin-top: 24px">严重程度等级</h4>
            <a-descriptions :column="5" bordered size="small">
              <a-descriptions-item label="调试">
                <a-tag color="default">DEBUG</a-tag>
                开发调试信息
              </a-descriptions-item>
              <a-descriptions-item label="信息">
                <a-tag color="blue">INFO</a-tag>
                一般信息记录
              </a-descriptions-item>
              <a-descriptions-item label="警告">
                <a-tag color="orange">WARNING</a-tag>
                需要注意的警告
              </a-descriptions-item>
              <a-descriptions-item label="错误">
                <a-tag color="red">ERROR</a-tag>
                系统错误
              </a-descriptions-item>
              <a-descriptions-item label="严重">
                <a-tag color="red">CRITICAL</a-tag>
                严重系统问题
              </a-descriptions-item>
            </a-descriptions>
          </section>

          <section class="guide-section">
            <h3>🔄 事件处理流程</h3>

            <a-steps direction="vertical" size="small">
              <a-step title="事件定义" description="定义事件类型、参数和条件" />
              <a-step title="事件触发" description="系统或用户触发事件" />
              <a-step title="事件过滤" description="根据条件过滤事件" />
              <a-step title="事件订阅" description="订阅者接收事件通知" />
              <a-step title="事件处理" description="执行相应的处理动作" />
              <a-step title="事件记录" description="记录事件处理结果" />
            </a-steps>

            <a-alert
              message="事件处理原则"
              description="事件处理应遵循幂等性、可重试性和补偿性原则，确保系统的一致性和可靠性"
              type="info"
              show-icon
              style="margin-top: 16px"
            />
          </section>

          <section class="guide-section">
            <h3>📋 事件查询和过滤</h3>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-card size="small" title="查询条件">
                  <a-list size="small">
                    <a-list-item>事件类型：按事件类型筛选</a-list-item>
                    <a-list-item>严重程度：按严重程度筛选</a-list-item>
                    <a-list-item>事件来源：按来源筛选</a-list-item>
                    <a-list-item>处理状态：已处理/未处理</a-list-item>
                    <a-list-item>时间范围：指定时间区间</a-list-item>
                    <a-list-item>关键词：搜索事件内容</a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card size="small" title="过滤功能">
                  <a-list size="small">
                    <a-list-item>实时过滤：动态更新结果</a-list-item>
                    <a-list-item>批量操作：批量处理事件</a-list-item>
                    <a-list-item>排序功能：按时间、类型排序</a-list-item>
                    <a-list-item>分页显示：支持大量数据</a-list-item>
                    <a-list-item>导出功能：导出事件数据</a-list-item>
                  </a-list>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>🔔 事件订阅和通知</h3>

            <a-row :gutter="16">
              <a-col :span="8">
                <a-card size="small" title="订阅类型">
                  <a-list size="small">
                    <a-list-item>
                      <a-tag color="blue">Webhook</a-tag>
                      HTTP回调通知
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="green">邮件</a-tag>
                      邮件通知
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="orange">短信</a-tag>
                      短信通知
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="purple">站内通知</a-tag>
                      系统内通知
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="cyan">函数调用</a-tag>
                      自定义函数
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small" title="订阅配置">
                  <a-list size="small">
                    <a-list-item>事件类型：选择订阅的事件</a-list-item>
                    <a-list-item>资源范围：指定资源范围</a-list-item>
                    <a-list-item>过滤条件：设置过滤规则</a-list-item>
                    <a-list-item>通知频率：控制通知频率</a-list-item>
                    <a-list-item>重试机制：失败重试策略</a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small" title="通知管理">
                  <a-list size="small">
                    <a-list-item>通知历史：查看通知记录</a-list-item>
                    <a-list-item>成功统计：通知成功率</a-list-item>
                    <a-list-item>失败分析：失败原因分析</a-list-item>
                    <a-list-item>性能监控：通知性能指标</a-list-item>
                    <a-list-item>告警设置：异常告警配置</a-list-item>
                  </a-list>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>⚡ 事件触发器</h3>

            <a-alert
              message="触发器概念"
              description="事件触发器允许在特定条件下自动触发事件，支持定时触发、条件触发和手动触发"
              type="info"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-row :gutter="16">
              <a-col :span="6">
                <a-card size="small" title="定时触发">
                  <p>基于时间调度触发事件</p>
                  <a-tag color="blue">Cron表达式</a-tag>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" title="条件触发">
                  <p>基于条件满足触发事件</p>
                  <a-tag color="green">条件表达式</a-tag>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" title="手动触发">
                  <p>用户手动触发事件</p>
                  <a-tag color="orange">用户操作</a-tag>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" title="链式触发">
                  <p>事件间的链式触发</p>
                  <a-tag color="purple">事件链</a-tag>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>📊 事件监控和统计</h3>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-card size="small" title="监控指标">
                  <a-list size="small">
                    <a-list-item>事件总数：系统事件总量</a-list-item>
                    <a-list-item>处理率：事件处理成功率</a-list-item>
                    <a-list-item>响应时间：事件处理响应时间</a-list-item>
                    <a-list-item>错误率：事件处理错误率</a-list-item>
                    <a-list-item>订阅数：活跃订阅数量</a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card size="small" title="统计分析">
                  <a-list size="small">
                    <a-list-item>事件趋势：事件发生趋势分析</a-list-item>
                    <a-list-item>类型分布：各类型事件分布</a-list-item>
                    <a-list-item>来源分析：事件来源统计</a-list-item>
                    <a-list-item>严重程度：严重程度分布</a-list-item>
                    <a-list-item>处理效率：事件处理效率分析</a-list-item>
                  </a-list>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>💡 最佳实践</h3>

            <a-alert
              message="事件设计"
              description="设计事件时要考虑事件的重要性、频率和影响范围，合理设置严重程度和处理优先级"
              type="success"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="性能优化"
              description="合理配置事件过滤和订阅，避免事件风暴，优化事件处理性能"
              type="warning"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="监控告警"
              description="设置合理的事件监控和告警机制，及时发现和处理异常事件"
              type="info"
              show-icon
            />
          </section>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  visible: boolean;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  close: [];
}>();

// 方法
const handleClose = () => {
  emit('close');
};
</script>

<style lang="less" scoped>
.event-management-guide {
  .guide-content {
    max-height: 600px;
    overflow-y: auto;

    .guide-sections {
      .guide-section {
        margin-bottom: 32px;

        h3 {
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
          padding-bottom: 8px;
          margin-bottom: 16px;
        }

        h4 {
          color: #333;
          margin-bottom: 12px;
        }

        .event-card {
          .ant-card-head-title {
            display: flex;
            align-items: center;
            gap: 8px;
          }
        }
      }
    }
  }
}
</style>
